<template>
	<view class="home_box1">
		<!-- left-text="返回"   left-icon="left"  @clickLeft="back"-->
		<!-- <uni-nav-bar :fixed="true" status-bar :border="false" title="锐行抽奖" /> -->

		<view class="home_zhong" v-if="items.length>0">
			<!-- 顶部菜单 -->
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation>
				<view class="scroll-view-item_H" v-for="(tab,index) in items" :key="index"
					:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index,tab)" :id="'item-' + index">
					{{tab.name}}
				</view>
			</scroll-view>
			<!-- 弹出菜单按钮 -->
			<view class="z_right" @click="toggleMenu">
				<image :class="{'img': true, 'spin': menuOpen &&menuOpen_plus, 'spin-back': !menuOpen&&menuOpen_plus}"
					src="../../static/1.png" style="width: 50rpx; height:50rpx; " mode="scaleToFill" class="img">
				</image>
			</view>
			<!-- 弹出菜单 -->
			<view class="menu" v-if="menuOpen">
				<view class="menu-item" v-for="(tab,index) in items" :key="index"
					:class="navIndex==index ? 'menu-item-active' : ''" @click="selectMenu(index,tab)">{{tab.name}}
				</view>
			</view>
		</view>
		<!-- 底部列表 -->
		<view class="home_bottom" v-if="list.length>0">
			<view class="item" v-for="(item,index) in list" :key="index" @click="navigateToRaffleHome(item)">
				<view class="item_top">
					<image style="width: 100%;height: 100%;" :src="`${ym}/${item.url}`" mode="scaleToFill"></image>
				</view>
				<view class="item_bottom">
					{{item.name}}
				</view>
			</view>
			<!-- 加载中/没有更多 -->
			<view class="load_true" v-if="loading">
				<uni-load-more iconType="snow" :status="loadingtext" />
			</view>


		</view>
		<view class="kongtishi" v-if="list.length==0">
			暂无数据<text @click="gologin" class="show_login" v-if="showLogin">请登录</text>
		</view>

	</view>
</template>

<script>
	export default {
		onShow() {
			// 手机号码登录
			// let token = uni.getStorageSync('wx_user_token');
			// if (!token) {
			// 	uni.navigateTo({
			// 		url: '/packages/sjlogin/sjlogin'
			// 	});
			// }

		},
		onLoad() {
			if (!uni.getStorageSync('wx_user_token')) {
				this.showLogin = true;
			}
			this.loadData();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		// 监听用户点击右上角菜单的「转发」按钮时触发的事件
		onShareAppMessage() {
			// 设置转发的参数
			return {
				title: '天天幸运站',
				path: 'pages/home/home',
				imageUrl: '../../static/31.png',
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '天天幸运站',
				type: 0,
				summary: "",
			}
		},
		data() {
			return {
				showLogin: false,
				navIndex: 0,
				// items: ['全部', '节日', '抽奖', '刮刮乐', '游戏', '商业促销', '助力', '投票', '签到', '小程序', '红包', 'h5'],
				items: [],
				list: [],
				title: "锐行抽奖",
				menuOpen: false,
				menuOpen_plus: false,
				loading: false,
				loading2: false,
				loadingtext: "loading",
				page: 1,
				num: 10,
				ym: uni.imgPath,
			};
		},

		onPullDownRefresh() {
			this.menuOpen = false;
			this.list = [];
			this.navIndex = 0
			console.log("下拉加载");
			this.loadData();
		},
		onReachBottom() {
			this.loading2 = true
			this.templateIndex(this.items[this.navIndex])
			console.log("上拉加载");
		},
		methods: {


			gologin() {
				uni.redirectTo({
					url: '/pagesMy/wxlogin/wxlogin'
				});
			},
			loadData() {
				this.loading = true
				// 模板分类
				uni.$http.get('/user/index/templateClass').then(mb_fenlei => {
					this.items = [{
						name: '全部'
					}]
					for (let i = 0; i < mb_fenlei.data.data.length; i++) {
						this.items.push(mb_fenlei.data.data[i]);
					}
					console.log(this.items, "模板分类");
					this.templateIndex(this.items[0])
					this.loading = false
				})


			},
			// 模板列表
			templateIndex(tab) {
				uni.$http.post('/user/index/templateIndex', {
					page: this.page,
					num: this.num,
					class_id: tab.id,
				}).then(res => {
					console.log(res.data.data.list);
					this.list = res.data.data.list
					uni.stopPullDownRefresh(); //关闭下拉刷新
				})
			},
			// 顶部菜单
			checkIndex(index, tab) {
				this.navIndex = index;
				this.menuOpen = false;
				this.loading2 = false
				this.list = [];
				this.templateIndex(tab)
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
				this.menuOpen = false;
			},
			navigateToRaffleHome(item) {
				console.log(item);
				uni.navigateTo({
					url: '/packages/rafflehome/rafflehome?id=' + item.id + '&status=' + item.status + '&name=' +
						item.name + '&bagimg=' + `${this.ym}/${item.url}` + '&task_id=' + item.task_id
				});
			},
			toggleMenu() {
				this.menuOpen = !this.menuOpen;
				this.menuOpen_plus = true
			},
			// 弹出菜单
			selectMenu(index, tab) {
				this.navIndex = index;
				this.menuOpen = false;
				this.loading2 = false
				this.list = [];
				this.templateIndex(tab)
			},
			closeMenu() {
				this.menuOpen = false;
			}

		},

	}
</script>

<style lang="scss">
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(180deg);
		}
	}

	@keyframes spin-back {
		from {
			transform: rotate(180deg);
		}

		to {
			transform: rotate(0deg);
		}
	}

	.home_box1 {
		min-height: 100vh;
		width: 100%;
		background: linear-gradient(360deg, #F5F5F3 0%, #FFFFFF 100%);

		.kongtishi {
			font-size: 40rpx;
			font-weight: 600;
			color: #888888;
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;

			.show_login {
				margin-left: 20rpx;
				color: #4a73ff;
			}
		}

		.home_bottom {

			padding-top: 120rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 0 4%;

			.item {
				width: 45%;
				margin: 10rpx 0;
				/* 为上下添加10rpx的间距，使得多行间有一致的间距 */
				background: #FFFFFF;
				box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
				border-radius: 8px 8px 8px 8px;
				margin-bottom: 20rpx;

				.item_top {
					background-color: #CCCCCC;
					height: 200rpx;
					width: 100%;
				}

				.item_bottom {
					padding: 10rpx 6rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
					font-weight: 500;
					color: #000000;
				}
			}
		}

		// 中部大盒子
		.home_zhong {
			width: 100%;
			height: 84rpx;
			position: fixed;
			top: 0;
			z-index: 999;
			background-color: #ffffff !important;


			// 弹出菜单
			.menu {
				position: fixed;
				width: 100%;
				top: 84rpx;
				left: 0;
				padding: 15rpx 0;
				padding-top: 25rpx;
				background: linear-gradient(180deg, #F8FCFF 0%, #D5E8FF 100%);
				box-shadow: 0px 10px 10rpx 1rpx rgba(0, 0, 0, 0.27);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				flex-wrap: wrap;
				// justify-content: center;
				z-index: 10;
			}


			.menu-item {
				width: 20%;
				margin: 10rpx 2.5%;
				box-sizing: border-box;
				color: #000000;
				font-size: 28rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 10rpx;
				line-height: 50rpx;
			}

			.menu-item-active {
				background: linear-gradient(180deg, #356AFA 0%, #34B8FD 100%);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				color: #FFFFFF;
				line-height: 50rpx;
			}

			// 顶部菜单高亮
			.activite {
				color: #000000;
				font-size: 32rpx;
				font-weight: bold;
				border-bottom: 4rpx solid #3680FB;
			}

			// 滑动大盒子
			.scroll-view_H {
				white-space: nowrap;
				width: 80%;
				color: #606060;
				font-size: 28rpx;
				position: fixed;
				justify-content: center;
				z-index: 999;
				// background-color: #fff;
			}

			// 顶部菜单每一项
			.scroll-view-item_H {
				display: inline-block;
				// width: 20%;
				line-height: 50rpx;
				text-align: center;
				padding: 30rpx 0;
				padding-bottom: 0rpx;
				margin: 0 20rpx;
			}

			// 点击按钮
			.z_right {
				width: 20%;
				height: 76rpx;
				position: fixed;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 10rpx;

				.img.spin {
					animation: spin 0.2s linear forwards;
				}

				.img.spin-back {
					animation: spin-back 0.2s linear forwards;
				}
			}



		}



		.load_true {
			padding: 20rpx 0;
		}

		// 中间加载样式
		.load_true2 {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 50rpx 80rpx;
			padding-top: 60rpx;
			padding-bottom: 40rpx;
			background-color: rgba(0, 0, 0, 0.8);
			border-radius: 20rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				padding-top: 30rpx;
				font-size: 18px;
			}
		}
	}
</style>